import React, { Component } from 'react';
import '../styles/searchResult.scss'
import { Menu, MenuItem, Button } from '@nutui/nutui-react';
import { Empty } from 'antd-mobile'
import * as service from '../api/index'

class searchResult extends Component {
    constructor(props) {
        super(props)
        this.state = {
            input_text: '',
            searchlist: [],
            options: [
                { text: '全部商品', value: 0 },
                { text: '价格升序', value: 1 },
                { text: '价格降序', value: 2 },
            ],
            itemRef: null
        }
    }
    async componentDidMount() {

        var text = this.props.location.state.text
        var res = await service.pro_search({ keyword: text })
        this.setState({ searchlist: res.data.data }, () => {
            console.log(this.state.searchlist)
        })
    }
    inputchang(e) {
        this.setState({ [e.target.name]: e.target.value })
    }
    search_input(item) {//输入框保存
        this.setState({ input_text: item })
    }
    goback() {//回退
        this.props.history.go(-1)
    }
    goDetail(proid) {//去详情页面
        this.props.history.push({ pathname: '/detail', state: { id: proid } })
    }
    async searchBtn() {
        var res = await service.pro_search({ keyword: this.state.input_text })
        this.setState({ searchlist: res.data.data })
    }
    sort(e) {//排序
        console.log(e)
        if (e.value == 1) {
            var arr = this.state.searchlist.sort((a, b) => {
                return (a.originprice) - (b.originprice)
            })
            this.setState({ searchlist: arr })
        } else if (e.value == 2) {
            var arr = this.state.searchlist.sort((a, b) => {
                return (b.originprice) - (a.originprice)
            })
            this.setState({ searchlist: arr })
        } else if (e.value == 0) {
            this.setState({})

        }
    }
    render() {
        return (
            <div className='searchResult' >
                <header>
                    <div className="left">
                        <span className='iconfont icon-xiangzuojiantou' onClick={() => { this.goback() }}  >  </span>
                    </div>
                    <div className="input_box">
                        <input ref='inputtext' type="text" name='input_text' placeholder='搜索店铺内商品' value={this.state.input_text} onChange={(e) => { this.inputchang(e) }} />
                        <span className='redsearch' onClick={() => { this.searchBtn() }} > 搜索</span>
                    </div>
                </header>
                <div className="searchResult_middle">
                    <Menu>
                        <MenuItem options={this.state.options} value={0} onChange={(e) => { this.sort(e) }} />
                        <MenuItem title="筛选" ref={this.state.itemRef}>
                            <div>
                                <input type="text" placeholder='最高价格' />
                                <input type="text" placeholder='最高价格' />
                            </div>
                            <Button onClick={() => { }}>确认</Button>
                        </MenuItem>
                    </Menu>
                </div>
                {
                    this.state.searchlist && this.state.searchlist.length != 0 ?
                        <div className="searchResult_main">
                            {
                                this.state.searchlist.map((item, index) => {
                                    return (
                                        <div className="item" key={index} onClick={() => { this.goDetail(item.proid) }}  >
                                            <div className="left">
                                                <img src={item.img1} alt="" />
                                            </div>
                                            <div className="right">
                                                <div className="name">{item.proname}</div>
                                                <div className="Price">￥{item.originprice}</div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        :
                        <div className="nothing">
                            <Empty description='没有搜索到商品'
                                style={{ padding: '64px 0', backgroundColor: 'white' }}
                                imageStyle={{ width: 128 }}
                            />
                        </div>
                }
            </div>
        );
    }
}

export default searchResult;